<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        h1 {
            text-align: center;
            margin-top: 50px;
        }

        form {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }

        label {
            display: inline-block;
            width: 120px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        input[type=text], input[type=password], input[type=tel], input[type=email] {
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
            width: 100%;
            margin-bottom: 20px;
        }

        input[type=radio] {
            margin-right: 10px;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 15px 20px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        input[type=submit]:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
<h1>用户注册</h1>
<form action="#" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required><br>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required><br>

    <label for="phone">手机号：</label>
    <input type="tel" id="phone" name="phone"><br>

    <label for="email">邮箱：</label>
    <input type="email" id="email" class="email" name="email"><br>

    <p>验证码发送方式：</p>
    <input type="radio" id="sms" name="verification" value="sms">
    <label for="sms">短信</label><br>
    <input type="radio" id="mail" name="verification" value="email">
    <label for="mail">电子邮件</label><br>

    <input type="submit" value="注册">
</form>
</body>
</html>